<template>
	<view>
		<view class="index-list" style="margin-top: 40rpx;">
			<view class="index-list3">
				<!-- 图片 -->
				<image :src="item.typesrc" mode="widthFix"></image>
			</view>
			<view style="display: flex; justify-content: space-between;">
				<view @click="index1" class="icon iconfont icon-shoucang1" ref="colores" :class="{redss : colores}">{{good}}</view>
				<view @click="moretell" class="">{{tell}}</view>
				<view @click="index2" class="icon iconfont icon-xiazai ">保存</view>
			</view>
			<post v-show="tiao" :percentage="num" :strokeWidth='10'></post>
			
			<discuss v-show="pinglun" :commentList="commentList" ></discuss>
		</view>
	</view>
</template>

<script>
	// 下载条
	import post from './ai-progress/ai-progress.vue';
	// 评论
	import discuss from './five-commentlist/five-commentlist.vue';
	export default {
		props: {
			item: Object,
		},
		data() {
			return {
				obj: Object,
				colores: false,
				savepic: String,
				// 重复下载问题
				onemore: false,
				num: 0,
				good: '未赞',
				tiao: false,
				tell:'折叠评论',
				pinglun:true,
				commentList: [{
						"COMMENT_TIME": "2020-09-16 10:33:29",
						"FIRSTNICKNAME": "Ani-CC",
						"COMMENT": "这图片可以喔，下载了(模拟数据)",
						"HEADIMGURL": "http://api.btstu.cn/sjtx/api.php?lx=c1&format=images"
					}
				]
			}; 
		},
		created()
		{ 
			let obj={
				"COMMENT_TIME": "2020-05-20 23:45:21",
				"FIRSTNICKNAME": "Ani-GG",
				"COMMENT": "赞，非常好！(模拟数据)",
				"HEADIMGURL": "https://api.uomg.com/api/rand.avatar"
			}
			this.commentList.push(obj)
		},
		components: {
			post,
			discuss
		},
		methods: {
			// 评论折叠
			moretell()
			{
				
				if(this.pinglun==true)
				{
					this.pinglun=false
					this.tell='展开评论'
				}
				else
				{
					this.pinglun=true
					this.tell='折叠评论'
				}
				},
				
			index1() {
				this.good = '已赞'
				uni.showToast({
					icon: "none",
					title: "感谢你的点赞",
					success: () => {
						this.colores = true
					}
				})
			},
			index2() {
				// console.log("ok", this.savepic, this.item.typesrc)
				if (this.onemore == false) {
					this.tiao = true
					this.onemore = true
					const downloadTask = uni.downloadFile({
						url: this.item.typesrc, //仅为示例，并非真实的资源
						success: (res) => {
							this.tiao = false
							this.savepic = res.tempFilePath
							// 保存到相册（异步）
							uni.saveImageToPhotosAlbum({
								filePath: this.savepic,
								success: () => {
									uni.showToast({
										icon: "none",
										title: "下载成功，保存在相册"
									})
								}
							});
							this.onemore = false
						}
					});
					downloadTask.onProgressUpdate((res) => {
						this.num = res.progress

					});
				} else {
					uni.showToast({
						icon: "none",
						title: "正在下载！请稍等"
					})
				}

			}
		}
	}
</script>

<style>
	.yulai {
		color: #1AAD19;
	}

	.redss {
		color: #ff080c;
	}

	.index-list {
		padding: 20upx;
		border-bottom: 1upx solid #8e9293;
	}

	.index-list3>image {
		width: 100%;
		border-radius: 6px;
	}

	.index-list3 {
		position: relative;
	}
</style>
